<template>
	<view class="circle_detail_layout">
		<scroll-view scroll-y="true" class="scroll_view" v-if="data">
			<view class="top flex-row" v-if="data">
				<image :src="data.userInfo.avatar|| '@/static/defAvatar.png'" mode="aspectFit" class="avatar">
				</image>
				<view class="nickname"> {{ data.userInfo.nickname }} </view>
				<view class="star-container" @click="favorite_click(item)">
					<uni-icons v-if="data.is_favorite" type="star-filled" size="28" color="#dd524d"></uni-icons>
					<uni-icons v-else type="star" size="28" color="#222222"></uni-icons>
				</view>
			</view>

			<view class="content">
				<text>{{data.content}}</text>
			</view>

			<view v-for="(item,index) in data.imageUrl" :key="index" class="imageUrl">
				<image :src="item.path" mode="widthFix" @click="image_click(index)"></image>
			</view>

			<view class="interval_parent">
				<uni-dateformat :date="data.createTime" format="yyyy-MM-dd hh:mm发布" locale="zh"
					class="interval"></uni-dateformat>
			</view>

			<view class="likes flex-row">

				<view class="leading flex-row">
					<view v-for="(item,index) in data.likes.slice(0,8)" :key="index" class="avatars">
						<image :src="item.userInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="avatars" v-if="data.likes.length > 8">
						<uni-icons type="more-filled" color="#BCC1C7" size="18"></uni-icons>
					</view>
				</view>

				<view class="like_container flex-row" @click="like_click">
					<uni-icons v-if="data.is_like" type="hand-up-filled" size="20" color="#dd524d"></uni-icons>
					<uni-icons v-else type="hand-up" size="20" color="#BCC1C7"></uni-icons>
					<text v-if="data.like_count > 0" :class="data.is_like ? 'like_count_select' : 'like_count_normal'">
						{{data.like_count}} </text>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import {
		ref
	} from 'vue'

	import debounce from 'lodash/debounce'

	const circleObj = uniCloud.importObject('circleObj')
	const likeObj = uniCloud.importObject('likeObj')
	const favorite = uniCloud.importObject('favoriteObj')
	const data = ref(null)

	onLoad(async (paramters) => {
		let res = await circleObj.getDetail(paramters.id)
		console.log('备考圈详情', res);
		if (res.errCode != 0) {
			uni.showToast({
				title: res.errMsg
			})
			return
		}
		data.value = res.data
	})

	function image_click(current) {
		uni.previewImage({
			urls: data.value.imageUrl.map(item => item.path),
			current
		})
	}

	const like_click = debounce(async () => {
		uni.showLoading({
			mask: true
		})
		let res = await likeObj.like(data.value._id, 1, data.value.is_like)
		let flag = res.errCode == 0
		if (flag) {
			data.value.is_like = !data.value.is_like
			data.value.is_like ? data.value.like_count++ : data.value.like_count--
			uni.$emit('circle_is_like_emit', {
				_id: data.value._id,
				is_like: data.value.is_like,
				like_count: data.value.like_count
			})
		}
		uni.hideLoading()
		uni.showToast({
			title: flag ? (data.value.is_like ? "已点赞" : "已取消点赞") : res.errMsg,
			icon: data.value.is_like ? 'success' : 'fail'
		})
		let result = await circleObj.circle_likes(data.value._id)
		if (result.errCode != 0) {
			return
		}
		data.value.likes = result.data
	}, 500, {
		leading: true,
		trailing: false
	})

	async function favorite_click() {
		let res = await favorite.favorite(data.value._id, 1, data.value.is_favorite)
		if (res.errCode != 0) {
			return
		}
		data.value.is_favorite = !data.value.is_favorite
		uni.showToast({
			title: data.value.is_favorite ? '收藏成功' : '取消收藏成功',
			icon: 'success'
		})
		uni.$emit('circle_is_favorite_emit')
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: $me-color-background;
	}
</style>

<style lang="scss" scoped>
	.circle_detail_layout {

		.scroll_view {
			box-sizing: border-box;
			padding: 28rpx 40rpx;
			background: white;
			width: 100%;
			height: 100%;

			.top {
				align-items: center;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.nickname {
					flex: 1;
					align-items: center;
					margin-left: 10rpx;
					font-size: 25rpx;
					color: $me-color-gray-6;
				}
			}

			.content {
				margin-top: 25rpx;

				text {
					line-height: 1.8em;
					font-size: 28rpx;
				}
			}

			.imageUrl {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				image {
					width: 100%;
					box-sizing: border-box;
				}
			}

			.interval_parent {
				margin-top: 30rpx;

				.interval {
					font-size: 24rpx;
					color: $me-color-gray-6;
				}
			}

			.likes {
				padding: 20rpx 0 30rpx;
				justify-content: space-between;
				// border-bottom: 1rpx solid gray;

				.leading {
					.avatars {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;
						background-color: $me-color-background;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}


				.like_container {
					align-items: center;
					font-size: 20rpx;

					.like_count_select {
						margin-left: 10rpx;
						color: $me-color-red-1;
					}

					.like_count_normal {
						margin-left: 10rpx;
						color: $me-color-gray-7;
					}
				}
			}
		}
	}
</style>